<template>
  <div class="formTest">
    <ocn-mainForm
      layout="row"
      ref="myTestForm"
      :label_align_left="false"
      :form="formConfig"
      :showSelfLine="formConfig.selfLine.showSelfLine"
      :selfLabel="formConfig.selfLine.selfLabel"
      @submit="submit"
      @formEventBus="formEventBus"
    >
      <file-selection></file-selection>
    </ocn-mainForm>
  </div>
</template>
<script>
import formConfig from "./formConfig";

export default {
  name: "formTest",
  data() {
    return {
      formConfig: formConfig.formTest,
    };
  },
  created() {},
  mounted() {},
  activated() {},
  deactivated() {},
  /**
   * @author QL
   * @functionName beforeRouteLeave
   * @param { String } to       将要跳转的下一个路由
   * @param { String } from     从哪个路由进入的当前路由页面
   * @param { Function } next   执行跳转的手动触发回调方法
   * @date 2022-01-19 16:06:29
   * @version V..
   * @description vue-router 组件内 路由跳离 守卫函数
   */
  beforeRouteLeave(to, from, next) {
    this.$refs.myTestForm.resetForm();
    next();
  },

  methods: {
    submit(formDeliver) {
      this.$utils.setConsole("dialog form:", formDeliver);
    },

    formEventBus(busMsg) {
      this.$utils.setConsole("表单事件总线消息：", busMsg);
    },
  },
};
</script>
<style scoped>
.formTest {
  background-color: #ffffff;

  height: 100%;
  /* stretch 属性标识按照对称轴垂直方向沾满容器 前提是容器没有设置对称轴垂直方向的距离属性 width/height*/
  align-self: stretch;
  padding: 10px;
  margin: 2px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
</style>